<script lang="ts" setup name="myMap">
import { onMounted, ref } from 'vue';
import Map from 'ol/Map';
import View from 'ol/View';
import { createTdtLayer, createSupermapLayer } from '../utils/layers';

const mapRef = ref<HTMLElement>();
const map = ref<Map>();

onMounted(() => {
  map.value = new Map({
    target: mapRef.value,
    layers: [
      createTdtLayer('img_c'),
      createTdtLayer('cva_c'),
      createSupermapLayer(
        'http://123.127.160.203:8091/iserver/services/map-nercita_cloud/rest/maps/hailun_xzqh?prjCoordSys={"epsgCode":4326}',
      ),
      createSupermapLayer(
        'http://123.127.160.203:8091/iserver/services/map-nercita_cloud/rest/maps/hailun_gdzl_all?prjCoordSys={"epsgCode":4326}',
      ),
    ],
    controls: [],
    view: new View({
      projection: 'EPSG:4326',
      center: [125.31, 46.46],
      zoom: 9,
      minZoom: 1,
      maxZoom: 20,
      multiWorld: true,
    }),
  });
});
</script>

<template>
  <div class="my-map-wrap">
    <div class="map" ref="mapRef"></div>
  </div>
</template>

<style>
.my-map-wrap,
.map {
  height: 100%;
}
</style>
